<template>
    <div class="container">
        <div class="left">
            <div class="food" v-for="i in foodInfo" :key="i.bian_hao" @click="goDetails(i.bian_hao)">
                <div class="left-section">
                    <div class="image-placeholder">
                        <img :src="i.tu_pian[0]" alt="">
                    </div>
                </div>
                <div class="right-section">
                    <div class="title">
                        {{ i.ming_cheng }}
                    </div>
                    <div class="rating">
                        <span class="score">{{ i.ping_fen }}</span>分
                    </div>
                    <div class="review-info">
                        <div>
                            <SvgIcon name="remark" />
                        </div>
                        <span class="review-count">{{ getChangeNum() }} 条点评</span>
                    </div>
                    <div class="review-content">
                        <p>{{ i.dian_ping }}</p>
                        <p class="review-author">来自 <span>{{ getChangeName(i.dian_ping) }}</span> 的点评</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="right">
            <div class="restaurant-info-container" v-for="i in foodInfo" :key="i.bian_hao">
                <div class="header">餐厅信息</div>
                <div class="info-item">
                    <span class="label">人均:</span>
                    <span class="value">
                        <span class="price">{{ i.xing_xi.ren_jun }}</span>
                        <span class="feedback">(来自用户反馈)</span>
                    </span>
                </div>
                <div class="info-item">
                    <span class="label">菜系:</span>
                    <span class="value">{{ i.xing_xi.cai_xi }} </span>
                </div>
                <div class="info-item">
                    <span class="label">电话:</span>
                    <span class="value">{{ i.xing_xi.dian_hua }}</span>
                </div>
                <div class="info-item">
                    <span class="label">地址:</span>
                    <span class="value">{{ i.xing_xi.di_zhi }}</span>
                </div>
                <div class="info-item">
                    <span class="label">营业时间:</span>
                    <span class="value">{{ i.xing_xi.shi_jian }}</span>
                </div>
                <div class="disclaimer">
                    <span class="label">免责申明:</span>
                    <span class="value">*仅提供信息展示，如信息有误请及时联系我们</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { useFoodsStore } from '@/stores/modules/foods';
const foodsStore = useFoodsStore()

import { useRouter } from 'vue-router';
const $router = useRouter()

const getChangeNum = () => {
    return Math.floor(Math.random() * 100 + 50) + 100
}

const getChangeName = (str: string) => {
    let num = Math.floor(Math.random() * 10)
    let max = Math.floor(Math.random() * 3) + 3;
    return str.slice(num, num + max) || '那风轻抚'
}

let foodInfo = ref<any>([])

const getFoodsInfo = async () => {
    let data = (await foodsStore.getFoods()).data
    foodInfo.value = data
}

const goDetails = (id: string) => {
    $router.push({ name: 'FoodDetails', params: { id } })
}

onMounted(() => {
    getFoodsInfo()
})
</script>

<style scoped lang="scss">
.container {
    display: flex;
    justify-content: space-between;
    min-width: 1000px;
    width: 100%;
    background-color: #f6f6f6;


    .left {
        width: 70%;
        height: 220px;

        .food {
            display: flex;
            border: 1px solid #eaeaea;
            padding: 10px;
            height: 100%;
            margin-bottom: 10px;
            cursor: pointer;
            background-color: #fff;

            .left-section {
                width: 40%;
                position: relative;

                .image-placeholder {
                    width: 100%;
                    height: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .right-section {
                width: 60%;
                padding: 10px;
                display: flex;
                flex-direction: column;

                .title {
                    font-size: 20px;
                    font-weight: 500;
                }

                .rating {
                    font-size: 16px;
                    color: #007aff;
                    margin-bottom: 10px;

                    .score {
                        font-weight: 600;
                    }
                }

                .review-info {
                    margin-bottom: 20px;
                    display: flex;

                    &>div {
                        display: flex;
                    }

                    .review-count {
                        color: #666;
                        margin-left: 5px;
                        font-size: 14px;
                    }

                }

                .review-content {
                    line-height: 1.5;
                    color: #333;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    p {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        font-size: 14px;
                    }

                    .review-author {
                        color: #999999;

                        span {
                            color: #007aff;
                        }
                    }
                }
            }
        }
    }

    .right {
        width: 28%;

        .restaurant-info-container {
            border: 1px solid #e0e0e0;
            border-top: 3px solid #64b5f6;
            border-radius: 5px;
            padding: 15px;
            font-family: Arial, sans-serif;
            height: 220px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 10px;
            background-color: #fff;

            .header {
                font-size: 16px;
                margin-bottom: 5px;
            }

            .info-item {
                font-size: 14px;
                display: flex;

                .label {
                    display: block;
                    width: 80px;
                    color: #333;
                }

                .value {
                    display: block;
                    flex: 1;
                    color: #666;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                    .price {
                        color: #f44336;
                    }

                    .feedback {
                        color: #999;
                        font-size: 14px;
                    }

                    .cuisine {
                        margin-right: 10px;
                        background-color: #e3f2fd;
                        padding: 3px 6px;
                        border-radius: 3px;
                    }
                }
            }

            .disclaimer {
                font-size: 14px;
                color: #999;

                .label {
                    display: inline-block;
                    width: 80px;
                }
            }
        }
    }
}
</style>